<template>
  <el-dialog
      title="详情"
      custom-class="x-large-dialog"
      :visible="visible"
      append-to-body
      @open="mixinOpen('role')"
      @close="close"
  >
    <div class="detail-pannel">
      <template v-if="role">
        <div class="group-title">角色信息</div>
        <el-form>
          <el-row>
            <el-col :span="6">
              <el-form-item label="角色名称：">{{role.name}}</el-form-item>
            </el-col>
            <el-row>
              <el-col :span="24">
                <el-form-item label="角色权限" prop="auth">
                  <el-tree
                      ref="tree"
                      :data="menuList"
                      :props="defaultProps"
                      show-checkbox
                      node-key="id"
                  >
                  </el-tree>
                </el-form-item>
              </el-col>
            </el-row>
            <el-col :span="6">
              <el-form-item label="角色发布时间：">{{role.createdAt | timeFilter}}</el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="角色更新时间：">{{role.updatedAt | timeFilter}}</el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="24">
              <el-form-item label="角色描述：">{{role.description}}</el-form-item>
            </el-col>
          </el-row>
        </el-form>
      </template>
      <template v-if="user">
        <div class="group-title">用户信息</div>
        <el-form>
          <el-row>
            <el-col :span="6">
              <el-form-item label="用户名称：">{{user.userName}}</el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="用户昵称：">{{user.nickName}}</el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="用户注册时间：">{{role.createdAt | timeFilter}}</el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="用户更新时间：">{{role.updatedAt | timeFilter}}</el-form-item>
            </el-col>
          </el-row>
        </el-form>
      </template>
    </div>
    <div slot="footer">
      <el-button @click="close">取 消</el-button>
    </div>
  </el-dialog>
</template>

<script>
import { _getDetail } from '../src/store'
import { detailDialog, getAllMenu } from '@/mixins'

export default {
  name: 'detailDialog',
  mixins: [detailDialog, getAllMenu],
  data() {
    return {
      detailFunc: _getDetail,
      isDisabled: true
    }
  },
  computed: {
    role() {
      return this.detailData?.role
    },
    user() {
      return this.detailData?.user
    }
  }
}
</script>

<style scoped>

</style>
